<template>
    <div class="dashboard-container">
      <div class="container">
        <div class="tableBar">
          <div class="tableLab">
            <el-button type="danger" @click="deleteHandle('批量', null)">
              批量删除
            </el-button>
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click="addWesternMedicinetype('add')"
            >
              + 新建西药信息
            </el-button>
          </div>
  
          <label style="margin-left: 100px">西药名称：</label>
          <el-input
            v-model="input"
            placeholder="请填写西药名称"
            style="width: 14%"
            clearable
            @clear="init"
            @keyup.enter.native="initFun"
          />
  
          <label style="margin-right: 10px; margin-left: 20px">分类：</label>
          <el-select
            v-model="categoryId"
            style="width: 14%"
            placeholder="请选择"
            clearable
            @clear="init"
          >
            <el-option
              v-for="item in WesternMedicineCategoryList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
  
          <label style="margin-right: 10px; margin-left: 20px">状态：</label>
          <el-select
            v-model="WesternMedicineStatus"
            style="width: 14%"
            placeholder="请选择"
            clearable
            @clear="init"
          >
            <el-option
              v-for="item in saleStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button class="normal-btn continue" @click="init(true)">
            查询
          </el-button>
        </div>
        <el-table
          v-if="tableData.length"
          :row-class-name="tableRowClassName"
          :data="tableData"
          style="width: 100%"
          class="tableBox"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="25" />
          <el-table-column prop="name" label="药品名称" />
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="西药名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="分类">
                  <span>
                    {{ props.row.categoryName }}
                  </span>
                </el-form-item>
                <el-form-item label="价格">
                  <span> ￥{{ props.row.price }} </span>
                </el-form-item>
                <el-form-item label="主治功能">
                  <span> {{ props.row.description }} </span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="image" label="图片">
            <template slot-scope="{ row }">
              <el-image
                style="width: 80px; height: 40px; border: none; cursor: pointer"
                :src="row.image"
              >
                <div slot="error" class="image-slot">
                  <img
                    src="./../../assets/noImg.png"
                    style="width: auto; height: 40px; border: none"
                  />
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryName"
            label="分类"
            sortable
            :filters="[
              { text: '中药材', value: '中药材' },
              { text: '清热解毒', value: '清热解毒' },
              { text: '汤料花茶', value: '汤料花茶' },
              { text: '消化系统', value: '消化系统' },
              { text: '呼吸系统', value: '呼吸系统' },
              { text: '五官用药', value: '五官用药' },
              { text: '其他药品', value: '其他药品' },
            ]"
            :filter-method="filterTypes"
            filter-placement="bottom-end"
          />
          <el-table-column label="售价" sortable>
            <template slot-scope="scope">
              <span style="margin-right: 10px"
                >￥{{ (scope.row.price.toFixed(2) * 100) / 100 }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="tag"
            :filters="[
              { text: '下架', value: String(0) },
              { text: '上架', value: String(1) },
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <div
                class="tableColumn-status"
                :class="{ 'stop-use': String(scope.row.status) === '0' }"
              >
                <el-tag
                  :type="String(scope.row.status) === '1' ? 'success' : 'primary'"
                  disable-transitions
                >
                  {{ String(scope.row.status) === '0' ? '下架' : '上架' }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="updateTime" label="最后操作时间" />
          <el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <el-button
                size="small"
                class="blueBug"
                @click="addWesternMedicinetype(scope.row.id)"
              >
                修改
              </el-button>
              <el-button
                size="small"
                class="delBut"
                @click="deleteHandle('单删', scope.row.id)"
              >
                删除
              </el-button>
              <el-button
                size="small"
                plain
                type="String(scopr.row.status) === '1' ? 'success' : 'primary'"
                @click="statusHandle(scope.row)"
              >
                {{ scope.row.status == '0' ? '上架' : '下架' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Empty v-else :is-search="isSearch" />
        <el-pagination
          v-if="counts > 10"
          class="pageList"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script>
  import { Component, Vue } from 'vue-property-decorator'
  import HeadLable from '@/components/HeadLable/index.vue'
  import {
    getWesternMedicinePage,
    editWesternMedicine,
    deleteWesternMedicine,
    WesternMedicineStatusByStatus,
    WesternMedicineCategoryList,
  } from '@/api/western_medicine'
  import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
  import Empty from '@/components/Empty/index.vue'
  
  @Component({
    name: 'WesternMedicineType',
    components: {
      HeadLable,
      InputAutoComplete,
      Empty,
    },
  })
  export default class extends Vue {
    input = ''
    counts = 0
    page = 1
    pageSize = 10
    checkList = []
    tableData = []
    WesternMedicineState = ''
    WesternMedicineCategoryList = []
    categoryId = ''
    WesternMedicineStatus = ''
    isSearch = false
    saleStatus = [
      {
        value: 0,
        label: '下架',
      },
      {
        value: 1,
        label: '上架',
      },
    ]
  
    created() {
      this.init()
      this.getChineseWesternCategoryList()
    }
  
    initProp(val) {
      this.input = val
      this.initFun()
    }
  
    initFun() {
      this.page = 1
      this.init()
    }
  
    async init(isSearch) {
      this.isSearch = isSearch
      await getWesternMedicinePage({
        page: this.page,
        pageSize: this.pageSize,
        name: this.input || undefined,
        categoryId: this.categoryId || undefined,
        status: this.WesternMedicineStatus,
      })
        .then((res) => {
          if (res.data.code === 1) {
            this.tableData = res.data && res.data.data && res.data.data.records
  
            this.counts = Number(res.data.data.total)
            console.log('res_count', res)
            console.log('this.categoryId', this.categoryId)
          }
        })
        .catch((err) => {
          this.$message.error('请求出错了：' + err.message)
        })
    }
  
    // 添加
    addWesternMedicinetype(st) {
      if (st === 'add') {
        this.$router.push({ path: '/westernmedicine/add' })
      } else {
        this.$router.push({
          path: '/westernmedicine/add',
          query: { id: st },
        })
      }
    }
  
    // 删除
    deleteHandle(type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$message.error('请选择删除对象')
        }
      }
      this.$confirm('删除该西药, 是否继续?', '确定删除', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteWesternMedicine(
          type === '批量' ? this.checkList.join(',') : id
        )
          .then((res) => {
            if (res && res.data && res.data.code === 1) {
              this.$message.success('删除成功！')
              this.init()
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((err) => {
            this.$message.error('请求出错了：' + err.message)
          })
      })
    }
    //获取分类下拉数据
    getChineseWesternCategoryList() {
      WesternMedicineCategoryList({
        type: 1,
      })
        .then((res) => {
          if (res && res.data && res.data.code === 1) {
            console.log("CategoryType:",this.type);
            console.log("cwnCategoryList:",this.WesternMedicineCategoryList);
            this.WesternMedicineCategoryList = (
              res.data &&
              res.data.data &&
              res.data.data
            ).map((item) => {
              return { value: item.id, label: item.name }
            })
          }
        })
        .catch(() => {})
    }
  
    //状态更改
    statusHandle(row) {
      let params = {}
      if (typeof row === 'string') {
        if (this.checkList.length === 0) {
          this.$message.error('批量操作，请先勾选西药！')
          return false
        }
        params.id = this.checkList.join(',')
        params.status = row
      } else {
        params.id = row.id
        params.status = row.status ? '0' : '1'
      }
      this.WesternMedicineState = params
      this.$confirm('确认更改该西药状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 上线下架---批量上线下架接口
        WesternMedicineStatusByStatus(this.WesternMedicineState)
          .then((res) => {
            if (res && res.data && res.data.code === 1) {
              this.$message.success('西药状态已经更改成功！')
              this.init()
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((err) => {
            this.$message.error('请求出错了：' + err.message)
          })
      })
    }
  
    //上架下架颜色更改
    tableRowClassName({ row, value }) {
      if (String(row.status) === '0') {
        console.log('0', row)
        return 'warning-row'
      } else if (String(row.status) === '1') {
        console.log('1', row)
        return 'success-row'
      } else {
        console.log('res')
        return 'default-row'
      }
    }
  
    //表头导航上架下架搜索
    filterTag(value, row) {
      console.log('String(value)=', String(value))
      console.log('row.status=', row.status)
      console.log('row', row)
      return row.status == String(value)
    }
  
    //分类筛选
    filterTypes(value, row) {
      return String(row.categoryName) === String(value)
    }
  
    // 全部操作
    handleSelectionChange(val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    }
  
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    }
  
    handleCurrentChange(val) {
      this.page = val
      this.init()
    }
  }
  </script>
  <style lang="scss">
  .el-table-column--selection .cell {
    padding-left: 10px;
  }
  </style>
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
      .container {
        background: #fff;
        position: relative;
        z-index: 1;
        padding: 30px 28px;
        border-radius: 4px;
        //查询黑色按钮样式
        .normal-btn {
          background: #333333;
          color: white;
          margin-left: 20px;
        }
        .tableBar {
          margin-bottom: 20px;
  
          .tableLab {
            display: inline-block;
            //float: right;
            span {
              cursor: pointer;
              display: inline-block;
              font-size: 14px;
              padding: 0 20px;
              color: $gray-2;
            }
          }
        }
        .tableBox {
          width: 100%;
          border: 1px solid $gray-5;
          border-bottom: 0;
        }
        .pageList {
          text-align: center;
          margin-top: 30px;
        }
      }
    }
  }
  </style>
  <style lang="scss">
  .el-table .warning-row {
    background-color: oldlace !important;
  }
  
  .el-table .success-row {
    background-color: #f0f9eb !important;
  }
  
  .el-table .default-row {
    background: yellow;
  }
  </style>
  